<template>
  <div style="width: 100%;padding-top: 3%;">
    <div style="width: 94%;margin-left: 3%;" v-if="notice">
      <div class="table-title">
        {{notice.noticeTitle}}
      </div>
      <div style="height: 10px;"></div>
      <div v-html="notice.noticeContent"></div>

    </div>

  </div>
</template>

<script>


export default {
  name: "NoticeH5",
  data() {
    return {
      baseUrl:process.env.VUE_APP_BASE_API,
      noticeId:0,
      dataList:[],
      notice: null,
    };
  },
  created() {
    let noticeId = this.$route.params && this.$route.params.noticeId;
    this.noticeId = parseInt(noticeId);
    this.getNotice()
  },
  methods: {
    getNotice() {
      this.request({
        url: '/system/notice/listH5',
        method: 'get',
      }).then(res => {
        this.dataList = res.rows;
        if(this.dataList && this.dataList.length>0){
          let notice = this.dataList.find(item =>{
            return item.noticeId == this.noticeId
          })
          this.notice = notice
          if(this.notice){
            this.notice.noticeContent = this.notice.noticeContent.replaceAll('/dev-api/profile', this.baseUrl + '/profile')
              .replaceAll('/prod-api/profile', this.baseUrl + '/profile')
              .replaceAll('<img', '<img style="width:100% !important;"')
              .replaceAll('<blockquote','<blockquote style="border-left: 4px solid rgb(204, 204, 204); margin: 10px 0px; padding-left: 16px; padding-right: 10px; color: rgb(85, 85, 85);font-size:15px;line-height:25px;"')
              .replaceAll('<pre class="ql-syntax" spellcheck="false"', '<pre style="background-color:black;color:white;padding:5px 10px;margin-top:5px;margin-bottom:5px;border-radius:3px;line-height:25px;"')
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.table-title{
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  padding-left: 5%;
  padding-right: 5%;
  line-height: 35px;
  border: solid 1px #e8f4ff;
  background-color: #e8f4ff;
  color: #1890ff;
  letter-spacing: 1px;
}
</style>

